<template>
    <div class="select">
        <el-tabs v-model="activeName" class="demo-tabs" @tab-change="handleClick">
            <el-tab-pane label="公共" name="public"></el-tab-pane>
            <el-tab-pane label="我的" name="mine"></el-tab-pane>
        </el-tabs>
        <div class="people-list">
            <People style="height: 110px;"   v-for="item in peopleList" :name="item.name" :url="item.url" :id="item.id" :active="item.id == selectPeopleId" :preview-url="item.previewUrl" @item-click="itemClick"/>
        </div>
    </div>

</template>

<script setup lang="ts">
import People from './people/people.vue'
import { PeopleItem } from '@/models/components/index'
import {ref, reactive, onMounted} from 'vue';
import {getMinePeople, getPublishPeople} from '@/service/video'
import { to } from 'await-to-js'
const activeName = ref<string>('public') 
const peopleList = ref<PeopleItem[]>([])
const selectPeopleId = ref<string | number>('')
const emits = defineEmits(['selectClick'])

onMounted(async () => {
    await publicPeople()
})
const publicPeople = async (): Promise<void> => {
    const [err, data] = await to(getPublishPeople())
    if(err || !data.success) {
        return;
    }
    peopleList.value = data?.items.map((res: any) => ({url: res.cover, name: res.name, id: res.id, previewUrl: res.previewUrl}))
}
const mindPeople =  async (): Promise<void> => {
    const [err, data] = await to(getMinePeople())
    if(err || !data.success) {
        return;
    }
   peopleList.value = data?.items.map((res: any) => ({url: res.cover, name: res.name, id: res.id, previewUrl: res.previewUrl}))
}
const handleClick = (e: any): void => {
    if(e == 'mine') {
        mindPeople()
    }else {
        publicPeople()
    }
}
 
const itemClick = (id: string | number) => {
    selectPeopleId.value = id;
    const { url = ''}  = peopleList.value.find(res => res.id == id) || {}
    emits('selectClick', {url, id})
}

</script>
<style lang="css" scoped>
.select{
    width: 240px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.demo-tabs {
    /* margin: 0 20px; */
    /* width: ; */
    display: flex;
    justify-content: center;
}
.people-list {
    height: 58vh;
    overflow: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-left: 16px;
    /* padding:0 10px; */
    width: 98%;
}
/* .people-list > .item {
    margin-right: 12px;
} */
:deep(.el-tabs__nav-wrap::after) {
    display: none;
}
:deep(.el-tabs__active-bar) {
    background-color: #8252B3;
    width: 70px;
    height: 3px;
    border-radius: 2px;
}
:deep(.el-tabs__item.is-active) {
   color: #fff;
}
:deep(.el-tabs__item, .el-tabs__item:hover) {
    color: #9C9FA7;
    font-weight: 600;
    padding: 0 10px;
    width: 70px;
}
/* 整个滚动条 */
::-webkit-scrollbar {
  width: 4px; /* 设置滚动条的宽度 */
  /* display: none; */
}

/* 滚动条轨道 */
::-webkit-scrollbar-track {
    display: none;
  background-color: #f1f1f1; /* 设置滚动条轨道的背景色 */
}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  background-color: #DDDEE0; /* 设置滚动条滑块的颜色 */
  border-radius: 6px; /* 设置滚动条滑块的圆角 */
}

/* 当鼠标悬停在滚动条上时，滑块的样式 */
::-webkit-scrollbar-thumb:hover {
  background-color: #B2B2B2; /* 设置鼠标悬停时滚动条滑块的颜色 */
}
</style>